<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/dealer_info.css">
    <script>
        var docEl = document.documentElement
        docEl.style.fontSize = (docEl.clientWidth / 750 * 100) + 'px'
    </script>
    <script src="/js/pc.js"></script>
</head>
<body>
    <div class="dealer_info">
        <div class="logo"><img src="/img/logo.png" alt=""></div>
        <div class="title">
            <h1>经销商信息录入</h1>
        </div>
        <div class="content">
            <div class="list">
                <div class="list-cell">
                    <div class="name">车主姓名<span class="require">*</span></div>
                    <div class="value">
                        <input type="text" placeholder="请输入车主姓名" id="input-name">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">手机号码<span class="require">*</span></div>
                    <div class="value">
                        <input type="text" placeholder="请输入手机号码" id="input-tel">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">车品牌<span class="require">*</span></div>
                    <div class="value">
                        <span class="placeholder" id="text-car-brand">请选择</span>
                        <select onchange="carBrandChange(event)" id="select-car-brand">
                            <option value="" selected style="display: none;"></option>
                            <option value="1">奔驰</option>
                            <option value="2">大众</option>
                            <option value="3">马自达</option>
                            <option value="4">别克</option>
                        </select>
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">车型<span class="require">*</span></div>
                    <div class="value">
                        <span class="placeholder" id="text-car-cate">请选择</span>
                        <select onchange="carCateChange(event)" id="select-car-cate">
                            <option value="" selected style="display: none;"></option>
                            <option value="1">奔驰</option>
                            <option value="2">大众</option>
                            <option value="3">马自达</option>
                            <option value="4">别克</option>
                        </select>
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">车架号<span class="require">*</span></div>
                    <div class="value">
                        <input type="text" placeholder="请输入完整车架号" id="input-car-bone">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">车牌号</div>
                    <div class="value">
                        <input type="text" placeholder="请输入完整车牌号" id="input-car-number">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">膜卷号<span class="require">*</span></div>
                    <div class="value">
                        <input type="text" placeholder="请输入膜卷号" id="input-mask-number">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">膜系列<span class="require">*</span></div>
                    <div class="value" style="padding-right: 0.5rem;">
                        马自达
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">施工时间<span class="require">*</span></div>
                    <div class="value">
                        <span class="placeholder" id="shigong-date">请选择</span>
                        <input type="date" onchange="shigongDateChange(event)" id="date-shigong">
                    </div>
                </div>
                <div class="list-cell">
                    <div class="name">施工门店</div>
                    <div class="value">
                        <input type="text" placeholder="请输入施工门店">
                    </div>
                </div>
                <div class="list-cell daterange">
                    <div class="name">质保时间</div>
                    <div class="value">
                        2023-01-01
                    </div>
                </div>
            </div>
        </div>
        <div class="submit">
            <button onclick="submit()">登 录</button>
        </div>
        <div class="modal-alter" id="modal-alter" style="display: none;">
            <div class="modal-alter-wrap">
                <div class="icon"><img src="/img/dealer_info/icon.png" width="100%"></div>
                <p class="info" id="alter-info">请录入<span>车架号</span></p>
                <button onclick="hiddenAlter()">知道了</button>
            </div>
        </div>
        <div class="modal-success" id="modal-success" style="display: none;">
            <div class="modal-success-wrap">
                <div class="icon"><img src="/img/dealer_info/icon-1.png" width="100%"></div>
                <p class="info">录入成功</p>
                <div class="footer">
                    <a href="/dealer_info.html" class="button">再次录入</a>
                    <button onclick="hiddenSuccess()" class="button">返回</button>
                </div>
            </div>
        </div>
        <script>
            // 选择车品牌
            function carBrandChange(e) {
                console.log(e)
                var slectDom = e.target
                var value = slectDom.value
                e.target.setAttribute('value', value)
                var optionDomArr = [].slice.call(slectDom.children)
                document.getElementById('text-car-brand').innerHTML = optionDomArr.find(i => i.value == value).innerHTML
            }

            // 选择车型
            function carCateChange(e) {
                var slectDom = e.target
                var value = slectDom.value
                e.target.setAttribute('value', value)
                var optionDomArr = [].slice.call(slectDom.children)
                document.getElementById('text-car-cate').innerHTML = optionDomArr.find(i => i.value == value).innerHTML
            }
            
            // 选择施工时间
            function shigongDateChange(e) {
                document.getElementById('shigong-date').innerHTML = e.target.value
            }

            function showAlter(msg) {
                document.getElementById('modal-alter').style.display = 'block'
                document.getElementById('alter-info').innerHTML = msg
            }

            function hiddenAlter() {
                document.getElementById('modal-alter').style.display = 'none'
            }

            function showSuccess() {
                document.getElementById('modal-success').style.display = 'block'
            }

            function hiddenSuccess() {
                document.getElementById('modal-success').style.display = 'none'
            }

            function submit() {
                if (!document.getElementById('input-name').value) return showAlter('请填写<span>车主姓名</span>')
                if (!document.getElementById('input-tel').value) return showAlter('请填写<span>手机号码</span>')
                if (!document.getElementById('select-car-brand').getAttribute('value')) return showAlter('请选择<span>车品牌</span>')
                if (!document.getElementById('select-car-cate').getAttribute('value')) return showAlter('请选择<span>车型</span>')
                if (!document.getElementById('input-car-bone').value) return showAlter('请填写<span>车架号</span>')
                if (!document.getElementById('input-mask-number').value) return showAlter('请填写<span>膜卷号</span>')
                if (!document.getElementById('date-shigong').value) return showAlter('请选择<span>施工时间</span>')
                showSuccess()
            }
        </script>
    </div>
</body>
</html>